<template>
	<view class="sp-user">
		<view class="sp-user__title">
			Hello!
		</view>
		<view class="sp-user__desc">
			欢迎登录巡检系统
		</view>
		<view class="sp-user__pics">
			<image src="../../static/images/user/pics.png" />
		</view>
		<view class="sp-user__form">
			<view class="sp-user__form-title">账号登录</view>
			<view class="sp-user__form-content">
				<view class="sp-user__form-item">
					<view class="sp-user__form-label">
						<image src="../../static/images/user/icon-user.png" />
						<text>账号</text>
					</view>
					<view class="sp-user__form-control">
						<input type="text" v-model="form.username" placeholder="请输入账号">
					</view>
				</view>
				<view class="sp-user__form-item">
					<view class="sp-user__form-label">
						<image src="../../static/images/user/icon-lock.png" />
						<text>密码</text>
					</view>
					<view class="sp-user__form-control">
						<input v-if="showpass" type="text" v-model="form.password" placeholder="请输入密码">
						<input v-else type="password" v-model="form.password" placeholder="请输入密码">
						<!-- <view :class="`sp-user__form-password ${showpass ? 'text' : 'pass'}`" @click="showpass = !showpass" /> -->
						<view class="sp-user__form-password" :class="{ 'text': showpass, 'pass': !showpass}" @click="showpass = !showpass"></view>
					</view>
				</view>
				<view class="sp-user__form-submit" @click="setLogin">登录</view>
			</view>
		</view>
		<!-- 更新 -->
		<!-- #ifdef APP -->
		<wrap-version-update id="532443316514885" @click="updateError"></wrap-version-update>
		<!-- #endif -->
	</view>
</template>

<script>
	import { appid } from '@/config/index.js'
	import { getToken, getInfos } from '@/api/task.js'
	
	export default {
		name: 'spUser',
		data() {
			return {
				appid,
				showpass: false,
				form: {
					username: '',
					password: ''
				}
			}
		},
		// xhd xhd888
		onLoad() {
			uni.removeStorageSync('aiInfos')
			uni.removeStorageSync('aiToken')
			const form = uni.getStorageSync('logForm')
			if (form) {
				this.form = {
					...form
				}
			}
			// uni.clearStorageSync()
			uni.hideLoading()
		},
		mounted() {},
		methods: {
			updateError() {
				this.$u.toast('更新失败')
			},
			async getInfo() {
				const data = await getInfos()
				uni.setStorageSync('aiUserInfo', data)
			},
			setLogin() {
				if (this.form.username === '' && this.form.password === '') {
					uni.$u.toast('请填写正确的账号密码')
					return false
				}
				uni.showLoading({
					title: '登录中...'
				})
				getToken(this.form).then(res => {
					this.getInfo();
					uni.setStorageSync('aiInfos', { ...res, name: this.form.username })
					uni.setStorageSync('aiToken', res.access_token)
					uni.setStorageSync('logForm', this.form)
					setTimeout(() => {
						uni.hideLoading()
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1000)
				}).catch(err => {
					uni.$u.toast(err.data?.detail ?? '登录失败')
				})
			}
		}
	}
</script>

<style>
	.zai-title{
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}
	.zai-form{
		margin-top: 300upx;
	}
	.zai-input{
	}
	.input-placeholder, .zai-input{
		color: #94afce;
	}
	.zai-label{
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}
	.zai-btn{
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}
	.zai-btn:after{
		border: 0;
	}
	/*按钮点击效果*/
	.zai-btn.button-hover{
		transform: translate(1upx, 1upx);
	}
</style>
